import React,{Component} from "react";
import { Form, Button, Input, Table, Pagination, Row, Col, DatePicker, message } from "antd";

class Company extends Component{
    constructor(props){
        super(props);
        this.state = {
            UIstate:{
                nomalDisplay:"block",
                addDispaly:"none",
            },
        }
    }
    addItem = (e) =>{
        this.setState({UIstate:{nomalDisplay:"none", addDispaly:"block"}});
        this.props.form.resetFields();
        //设置清空里面的内容
    }
    backClick = (e) =>{
        this.setState({UIstate:{nomalDisplay:"block", addDispaly:"none"}});
    }
    onSubmit = (e) =>{
        let state = 0;
        let values = this.props.form.getFieldsValue();
        for(let item in values){
            if(!values[item]){ state = 1; break; }
        }
        if(!state){
            this.setState({UIstate:{nomalDisplay:"block", addDispaly:"none"}});
            message.success("保存成功");
        }
        else{
            message.error("请输入所有信息");
            e.preventDefault();
        }
    }
    
    render(){
        let state = this.state;
        const _this = this;
        const rowSelection = {
            onChange(selectedRowKeys, selectedRows) {
              _this.setState({selectedRows});
            }
        };
        const columns = [{
                title: '名称',
                dataIndex: 'companyName',
                key: 'companyName',
                width:500,
                render: (text) => <span href="#">{text}</span>,
            }, {
                title: '操作',
                key: 'operation',
                width:200,
                render: (text, record) => (
                <span>
                    <a href="#">详情{record.name}</a>
                    <span>|</span>
                    <a href="#">删除{record.name}</a>
                </span>
                ),
            }
        ];
        let data = [], n = 20;
        for(let i = 0; i < n; i++){
            data.push({
                key:""+i,
                companyName:"公司名称"+i
            });
        }
        // form的数据
        //
        const {
            getFieldProps, getFieldValue, getFieldsError, getFieldError, isFieldTouched,
        } = this.props.form;
        const formItemLayout = {
            labelCol:{span: 10 },
            wrapperCol:{span: 14 },
            // labelCol: {
            //     // span: 4,
            //     // offset:24
            //     xs: { span: 24 },
            //     sm: { span: 8 },
            // },
            // wrapperCol: {
            //     // span: 4,
            //     // offset:4
            //     xs: { span: 24 },
            //     sm: { span: 8 },
            // },
        };
        return(
        <div className="company">
            <div className="nomal" style={{display: state.UIstate.nomalDisplay}}>
                <div className="contral">
                    <Form layout="inline" onSubmit={this.onSearch}>
                        <Form.Item>
                            <Button onClick={this.addItem}>新增</Button>
                        </Form.Item>
                        <Form.Item>
                            <Button>删除选中</Button>
                        </Form.Item>
                        <Form.Item label="公司名称">
                            <Input placeholder="公司名称" {...getFieldProps('cCompany')}></Input>
                        </Form.Item>
                        <Form.Item>
                            <Button className="search">查询</Button>
                        </Form.Item>
                    </Form>
                </div>
                <Table className="c-table table" 
                    rowSelection={rowSelection} 
                    columns={columns} dataSource={data} 
                    scroll={{ y: 400 }}
                    // onChange={this.tableChange}
                    pagenation={
                        <Pagination
                            total={80}
                            showTotal={total => `共 ${total} 条`}
                            pageSize={20} defaultCurrent={1}
                        />
                    }
                ></Table>
            </div>
            <div className="add" style={{display: state.UIstate.addDispaly}}>
                <div className="contral">
                    {/* <Button className="save" onClick={this.saveClick}>保存</Button> */}
                    <Button className="back" onClick={this.backClick}>返回</Button>
                </div>
                <Form onSubmit={this.onSubmit}>
                    <Row gutter={16}>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="公司名称">
                                <Input {...getFieldProps('company', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="工商注册号">
                                <Input {...getFieldProps('businessNumber', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="代表编码">
                                <Input placeholder="2位大写的代表编码" {...getFieldProps('code', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="公司注册时间">
                                <div>
                                    < DatePicker {...getFieldProps('registerTime', {
                                        rules: [
                                            {required: true, message: '输入不能为空', type:"object" },
                                            // {validator: this.checkDate},
                                        ],
                                    })} placeholder=""></DatePicker>
                                </div>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="联系电话">
                                <Input {...getFieldProps('phone', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                        </Col>
                        <Col sm={8}>
                            <Form.Item {...formItemLayout} label="邮箱">
                                <Input {...getFieldProps('email', {
                                    rules: [
                                        {required: true, message: '输入不能为空',type:"email" },
                                    ],
                                })}/>
                            </Form.Item>
                            <Form.Item {...formItemLayout} label="法定代表人">
                                <Input {...getFieldProps('represent', {
                                    rules: [
                                        {required: true, message: '输入不能为空' },
                                    ],
                                })}/>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Button type="primary" htmlType="submit" onClick={this.submitClick}>提交</Button>
                    </Row>
                </Form>
            </div>
        </div>
        )
    }
}

export default Form.create({})(Company);


